<template>
  <div class="bgc-default pad-20">
    <div class="top-operate-default mar-b-20">
      <div class="search-item">
        <label>搜索：</label>
        <el-select v-model="queryParams.searchKeyWordType" placeholder="请选择">
          <el-option v-for="item in optionsSearchTextType" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="queryParams.searchKeyWord" @keyup.enter.native="handleSearch" placeholder="请输入搜索关键词"
          style="width: 300px"></el-input>

        <label class="mar-l-20">时间：</label>
        <el-select v-model="queryParams.searchDateTimeType" placeholder="请选择">
          <el-option v-for="item in optionSearchDateTimeType" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker v-model="dateRange" :default-time="['00:00:00', '23:59:59']" type="datetimerange" unlink-panels
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <el-button-group>
          <el-button type="primary" @click="handleSearch" style="margin-left: 10px">查询</el-button>
          <el-button plain="" @click="resetSearch">重置</el-button>
        </el-button-group>
      </div>
    </div>
    <!-- 操作区域 -->
    <div class="tabs-box mar-t-15">
      <el-tabs type="card" v-model="queryParams.status" class="member-list-tab" @tab-click="handleClick">
        <el-tab-pane :label="allCheckName" name="0"></el-tab-pane>
        <el-tab-pane :label="pendingReviewCheckName" name="1"></el-tab-pane>
        <el-tab-pane :label="passedCheckName" name="2"></el-tab-pane>
        <el-tab-pane :label="didNotPassCheckName" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 内容列表 -->
    <div class="table-container">
      <el-table ref="multipleTable" :data="applyList" @selection-change="handleSelectionChange" v-loading="listLoading"
        element-loading-text="加载中" style="width: 100%" header-cell-class-name="default-header"
        row-class-name="default-row">
        <el-table-column width="55px" type="selection"></el-table-column>
        <el-table-column label="申请人信息" prop="userInfo">
          <template slot-scope="scope">
            <div class="flex v-align-c cursor-p">
              <label><img :src="scope.row.avatar" class="user-avatar" v-if="scope.row.avatar"></label>
              <div class="font-14 pad-l-10">
                <div>昵称：{{scope.row.nickName}}</div>
                <div>手机：{{scope.row.phone}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="申请单号" prop="applyNo" align="center">
          <template slot-scope="scope">
            <div>[{{scope.row.applySourceName}}]{{scope.row.applyNo}}</div>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" prop="createTime" align="center" />
        <el-table-column label="转载凭证" align="center">
          <template slot-scope="scope">
            <el-image v-if="scope.row.proofPaymentImage" style="width: 170px; height:100px"
              :src="scope.row.proofPaymentImage" :preview-src-list="[scope.row.proofPaymentImage]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" prop="orderPrice" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.orderPrice">
              <div>￥{{scope.row.orderPrice}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" prop="statusName" align="center" />
        <el-table-column label="审核时间" prop="updateTime" align="center" />
        <el-table-column label="拒绝原因" prop="refuseReason" show-overflow-tooltip />
        <el-table-column width="180px" label="操作" align="right" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="batchCheckStatus(scope.row, 2)" v-if="scope.row.status === 1">
              通过
            </el-button>
            <el-button type="text" size="medium" @click="batchCheckStatus(scope.row, 3)" v-if="scope.row.status === 1">
              拒绝
            </el-button>
            <el-button type="text" size="medium" @click="linkOrderDetail(scope.row)">关联订单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.currentPage" :limit.sync="queryParams.size"
      @pagination="getList" />

  </div>
</template>

<script>
  import {
    pagingProjectOrderOfflinePaymentApply,
    getProjectOrderOfflinePaymentApplyStatusCount,
    updateProjectOrderOfflinePaymentApplyStatus
  } from '@/api/finace/wholesaleOfflinePaymentApply'
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui

  export default {
    components: {},
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        optionsSearchTextType: [{
          value: '1',
          label: '批发订单号'
        }, {
          value: '2',
          label: '申请单号'
        }, {
          value: '3',
          label: '微客昵称'
        }, {
          value: '4',
          label: '微客手机号'
        }],
        optionSearchDateTimeType: [{
          value: '1',
          label: '申请时间'
        }, {
          value: '2',
          label: '审核时间'
        }],
        applyList: [],
        total: 0,
        queryParams: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          status: 0,
          searchKeyWordType: '1',
          searchKeyWord: '',
          searchDateTimeType: '1',
          beginDateTime: '',
          endDateTime: '',
          orderId: undefined
        },
        dateRange: [],
        listLoading: true,
        multipleSelection: [],
        allCheckName: '全部（0）',
        pendingReviewCheckName: '待审核（0）',
        passedCheckName: '已通过（0）',
        didNotPassCheckName: '未通过（0）',
        // 操作的记录id
        opeartRecordId: undefined,
        // 操作的状态
        opeartStatus: undefined,
        // 根据订单id查询
        searchOrderId: undefined,
        defaultSearchKeyWordType: '1'
      }
    },
    // 过滤器
    filters: {},
    // 初始化页面
    created() {
      const query = this.getCurrentPage().query
      if (query && query.orderId) {
        this.searchOrderId = query.orderId
        this.defaultSearchKeyWordType = '2'
        this.optionsSearchTextType = this.optionsSearchTextType.filter(t => t.value !== '1')
      }
      this.queryParams.searchKeyWordType = this.defaultSearchKeyWordType
      this.getCountApply()
      this.getList()
    },
    methods: {
      getCountApply() {
        var totalQuery = {
          enterpriseId: this.getEnterpriseId(),
          orderId: this.searchOrderId
        }
        getProjectOrderOfflinePaymentApplyStatusCount(totalQuery).then(response => {
          if (response.isError) return
          this.allCheckName = '全部（' + Math.floor(response.data.statisticsStatusAllCount) + '）'
          this.pendingReviewCheckName = '待审核（' + Math.floor(response.data.statisticsStatusPendingCount) + '）'
          this.passedCheckName = '已通过（' + Math.floor(response.data.statisticsStatusPassedCount) + '）'
          this.didNotPassCheckName = '未通过（' + Math.floor(response.data.statisticsStatusNotPassedCount) + '）'
        })
      },
      getList() {
        this.listLoading = true
        if (this.dateRange) {
          if (this.dateRange.length > 0) {
            this.queryParams.beginDateTime = this.dateRange[0]
            this.queryParams.endDateTime = this.dateRange[1]
          }
        } else {
          this.queryParams.beginDateTime = ''
          this.queryParams.endDateTime = ''
        }
        if (this.searchOrderId) {
          this.queryParams.orderId = this.searchOrderId
        }
        pagingProjectOrderOfflinePaymentApply(this.queryParams).then(response => {
          if (response.isError) return
          this.applyList = response.data.records
          this.total = response.data.total
          this.listLoading = false
        })
      },
      handleClick() {
        this.queryParams.currentPage = 1
        this.getList()
      },
      handleSearch() {
        this.queryParams.currentPage = 1
        this.getList()
      },
      resetSearch() {
        this.searchReset()
        this.getList()
      },
      searchReset() {
        this.dateRange = []
        this.queryParams = {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          status: '0',
          searchKeyWordType: this.defaultSearchKeyWordType,
          searchKeyWord: '',
          searchDateTimeType: '1',
          beginDateTime: '',
          endDateTime: ''
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      batchCheckStatus(row, status) {
        var that = this
        if (!row) {
          that.msgError('请选择要操作的数据!')
          return false
        }
        if (!status) {
          that.msgError('未知操作的状态!')
          return false
        }
        that.opeartRecordId = row.recordId
        that.opeartStatus = status
        if (that.opeartStatus === 2) {
          this.$confirm('确定要审核通过吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            that.updateStatusMethod()
          }).catch(() => {})
        } else if (that.opeartStatus === 3) {
          this.$prompt('', '审核不通过', {
            showClose: false,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPlaceholder: '请输入拒绝原因',
            inputValidator: function(val) {
              if (!val) {
                return '请输入拒绝原因!'
              }
              if (val.length > 200) {
                return '最多只能输入200个字!'
              }
            }
          }).then(({
            value
          }) => {
            that.updateStatusMethod(value)
          }).catch(() => {})
        }
      },
      updateStatusMethod(reason, callblack) {
        var that = this
        var query = {
          recordId: that.opeartRecordId,
          status: that.opeartStatus,
          reason: reason
        }
        updateProjectOrderOfflinePaymentApplyStatus(query).then(response => {
          if (response.isError) return
          that.msgSuccess(response.msg)
          that.getCountApply()
          that.getList()
        })
      },
      // 跳转订单详情事件
      linkOrderDetail(row) {
        const routeUrl = this.$router.resolve({
          path: '/order/order/detail/index',
          query: {
            orderId: row.orderId
          }
        })
        window.open(routeUrl.href, '_blank')
      }
    },
    mounted() {

    }
  }
</script>

<style lang="less" scoped>
  .user-avatar {
    width: 59px;
    height: 59px;
    display: block;
    border-radius: 50%;
  }

  .line-h-14 {
    line-height: 1.4;
  }

  .cursor-p {
    position: relative;

    .vip-icon-box {
      position: absolute;
      top: -4px;
      left: -7px;
      transform: rotate(308deg);
      z-index: 9;

      img {
        width: 20px;
      }
    }
  }

  .hint-area {
    background-color: #fdf8c8;
    height: 45px;
    line-height: 45px;

    .hint-icon {
      padding: 1px;
      margin: 10px 10px 0 0;
    }
  }

  .el-radio-group {
    padding-left: 5%;

    .el-radio {
      padding-top: 15px;
      display: block;
    }
  }

  .open-btn {
    width: 95px;
    height: 38px;
    line-height: 38px;
    padding: 0;
    text-align: center;
  }

  .code-box {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
    background: #ffffff;
    padding: 30px;

    img {
      width: 90%;
    }
  }

  .takeSelect {
    /deep/.el-input {
      width: 220px;
    }
  }
</style>
